<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>个人设置</title>
    <script src="/js/vue/vue.js"></script>
    <script src="/js/vue/axios.js"></script>
    <script src="/js/vue/element-ui.js"></script>
    <script src="/js/util.js"></script>
    <style>
        @import url("/css/vue/element-ui.css");
        .el-message {
            min-width: 100px !important;
            max-width: 80% !important;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --success: #4cc9f0;
            --danger: #f72585;
            --warning: #f8961e;
            --light: #f8f9fa;
            --dark: #212529;
            --background: #f0f2f5;
            --card-bg: #ffffff;
            --text-primary: #333333;
            --text-secondary: #6c757d;
            --border: #e0e0e0;
        }

        body {
            background-color: var(--background);
            color: var(--text-primary);
            line-height: 1.6;
            padding-bottom: 80px;
        }

        .container {
            max-width: 100%;
            padding: 0 15px;
        }

        /* 头部样式 */
        header {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 20px 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo i {
            font-size: 24px;
        }

        .logo h1 {
            font-size: 20px;
            font-weight: 600;
        }

        /* 下拉菜单样式 */
        .nav-dropdown {
            position: relative;
            display: inline-block;
        }

        .nav-dropdown select {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 5px;
            padding: 8px 12px;
            font-size: 14px;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            cursor: pointer;
            padding-right: 30px;
            outline: none;
        }

        .nav-dropdown select option {
            background-color: var(--primary);
            color: white;
        }

        .nav-dropdown::after {
            content: "▼";
            font-size: 10px;
            color: white;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }

        /* 主内容区 */
        .main-content {
            padding: 20px 0;
        }

        .section-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding: 0 10px;
        }

        .section-title h2 {
            font-size: 18px;
            font-weight: 600;
        }

        /* 设置项卡片 */
        .setting-card {
            background-color: var(--card-bg);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .setting-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .setting-title {
            font-weight: 600;
            color: var(--text-primary);
        }

        .setting-input {
            width: 100%;
            margin-bottom: 15px;
        }

        .setting-input .el-textarea__inner,
        .setting-input .el-input__inner {
            border-radius: 10px;
            padding: 12px 15px;
            font-size: 15px;
            width: 100%;
            color: gray;
            white-space: nowrap;
            overflow-x: auto;
            border: 1px solid lightgray;
        }

        .save-btn {
            width: 100%;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 50px;
            padding: 12px;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
        }

        .save-btn:hover {
            background-color: var(--secondary);
        }

        .save-btn:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        .logout-btn {
            width: 100%;
            margin-top: 20px;
            background-color: transparent;
            color: var(--danger);
            border: 1px solid var(--danger);
            border-radius: 50px;
            padding: 12px;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
        }

        .logout-btn:hover {
            background-color: rgba(247, 37, 133, 0.1);
        }

        .logout-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        /* 响应式调整 */
        @media (max-width: 480px) {
            .header-content {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .logo h1 {
                font-size: 18px;
            }
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .setting-card {
            animation: fadeIn 0.4s ease forwards;
        }

        /* 通知提示 */
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 2000;
        }

        .toast-notification {
            display: flex;
            align-items: center;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            color: white;
            margin-bottom: 10px;
            transform: translateX(150%);
            transition: transform 0.3s ease;
        }

        .toast-notification.show {
            transform: translateX(0);
        }

        .toast-notification.success {
            background-color: var(--success);
        }

        .toast-notification.error {
            background-color: var(--danger);
        }

        .toast-notification i {
            font-size: 20px;
            margin-right: 10px;
        }

        .toast-notification .toast-message {
            font-size: 14px;
        }

        /* 动画效果 */
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        @keyframes slideOut {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(100%); opacity: 0; }
        }

        .toast-notification.slide-in {
            animation: slideIn 0.3s forwards;
        }

        .toast-notification.slide-out {
            animation: slideOut 0.3s forwards;
        }

        /* 新增：Loading样式 */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .loading-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .spinner {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 0.8s linear infinite;
        }

        .btn-loading {
            pointer-events: none;
            opacity: 0.8;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 全局Loading遮罩 -->
<!--    <div class="loading-overlay" :class="{ active: globalLoading }">-->
<!--        <div class="spinner" style="width: 40px; height: 40px; border-width: 4px;"></div>-->
<!--    </div>-->

    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo" style="display: inline">
                    <h1>Coder-nav</h1>
                </div>
                <div class="nav-dropdown" style="position: absolute; right: 25px">
                    <select v-model="currentPage" @change="navigateToPage">
                        <option value="/">🍡&emsp;导航主页</option>
                        <option value="/memo">📌&emsp;记事本</option>
                        <option value="/cash">💰&emsp;记账本</option>
                        <option value="/page">🌈&emsp;动态页面</option>
                        <option value="/task">⏱️&emsp;定时任务</option>
                        <option value="/setting">⚙️&emsp;个人设置</option>
                        <option value="/readme">📖&emsp;帮助手册</option>
                        <option value="/doc.html">🛠️&emsp;接口文档</option>
                    </select>
                </div>
            </div>
        </div>
    </header>

    <div class="container">
        <div class="main-content">

            <div v-for="item in tableData" :key="item.key" class="setting-card">
                <div class="setting-header">
                    <div class="setting-title">{{ item.desc }}</div>
                </div>

                <el-input
                        class="setting-input"
                        v-if="item.key==='password'"
                        type="password"
                        v-model="item.params"
                        placeholder="重置密码"
                        clearable>
                </el-input>

                <el-input
                        class="setting-input"
                        v-else
                        type="textarea"
                        v-model="item.params"
                        :placeholder="'请输入'+item.desc"
                        :autosize="{minRows:1,maxRows:15}"
                        resize="none">
                </el-input>

                <button
                        class="save-btn"
                        @click="saveSetting(item.key, item.params)"
                        :disabled="savingSettings[item.key]"
                        :class="{ 'btn-loading': savingSettings[item.key] }">
                    <div class="spinner" v-if="savingSettings[item.key]"></div>
                    <span>{{ savingSettings[item.key] ? '保存中...' : '保存' }}</span>
                </button>
            </div>

            <button class="logout-btn" @click="clearToken" :disabled="loggingOut" :class="{ 'btn-loading': loggingOut }">
                <div class="spinner" v-if="loggingOut"></div>
                <span>{{ loggingOut ? '退出中...' : '退出登录' }}</span>
            </button>
        </div>
    </div>

    <!-- 通知提示容器 -->
    <div class="toast-container">
        <div v-for="(toast, index) in toasts" :key="index"
             class="toast-notification"
             :class="[toast.type, toast.show ? 'slide-in' : 'slide-out']"
             @animationend="handleAnimationEnd(index)">
            <i :class="toast.type === 'success' ? 'el-icon-success' : 'el-icon-error'"></i>
            <span class="toast-message">{{ toast.message }}</span>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                currentPage: '/setting',
                tableData: [],
                toasts: [],
                globalLoading: false,
                savingSettings: {}, // 记录每个设置项的保存状态
                loggingOut: false // 记录退出登录状态
            }
        },
        mounted() {
            this.checkToken();
        },
        methods: {
            initData() {
                this.getList();
            },
            checkToken() {
                this.globalLoading = true;
                localStorage.setItem('jump', window.location.href);
                axios.get('/login/checkToken', {
                    params: {
                        token: localStorage.getItem('token')
                    }
                }).then((response) => {
                    if(!response.data.data) {
                        localStorage.setItem('token', '');
                        window.location.href = '/login';
                        return;
                    }
                    this.initData();
                }).catch((error) => {
                    this.$message.error(error.message);
                }).finally(() => {
                    this.globalLoading = false;
                });
            },
            getList() {
                this.globalLoading = true;
                axios.get('/setting/getSettingList', {
                    headers: {
                        token: localStorage.getItem('token')
                    }
                }).then((response) => {
                    this.tableData = response.data.data;
                }).catch((error) => {
                    this.$message.error(error.message);
                }).finally(() => {
                    this.globalLoading = false;
                });
            },
            saveSetting(key, params) {
                // 设置保存状态
                this.$set(this.savingSettings, key, true);

                params = params.replace(/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/gm, '');
                axios.post('/setting/saveSetting', {
                    key: key,
                    params: params,
                }, {
                    headers: {
                        token: localStorage.getItem('token')
                    },
                }).then((response) => {
                    if(response.data.code === 200) {
                        this.$message.info('保存成功');
                        this.getList();
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch((error) => {
                    this.$message.error(error.message);
                }).finally(() => {
                    // 清除保存状态
                    this.$set(this.savingSettings, key, false);
                });
            },
            clearToken() {
                this.loggingOut = true;
                axios.get('/logout', {
                    params: {
                        token: localStorage.getItem('token')
                    }
                }).then(() => {
                    localStorage.setItem('token', '');
                    setTimeout(() => {
                        window.location.href = '/login';
                    }, 1000);
                }).catch((error) => {
                    this.$message.error(error.message);
                }).finally(() => {
                    this.loggingOut = false;
                });
            },
            navigateToPage() {
                if (this.currentPage && this.currentPage !== window.location.pathname) {
                    if (this.currentPage.startsWith('http')) {
                        window.open(this.currentPage, '_blank');
                    } else {
                        window.location.href = this.currentPage;
                    }
                }
            },
            // 显示通知提示
            showToast(message, type = 'success') {
                const toast = {
                    id: Date.now(),
                    message: message,
                    type: type,
                    show: true
                };

                this.toasts.push(toast);

                // 3秒后自动移除
                setTimeout(() => {
                    const index = this.toasts.findIndex(t => t.id === toast.id);
                    if (index !== -1) {
                        this.toasts[index].show = false;
                    }
                }, 3000);
            },
            // 处理动画结束事件
            handleAnimationEnd(index) {
                if (!this.toasts[index].show) {
                    this.toasts.splice(index, 1);
                }
            }
        }
    });
</script>
</body>
</html>